import { Component,useContext } from 'react';
import { Graph } from '@antv/x6'
import SchemaBuilder from '@xrenders/schema-builder';
import FlowBuilder, {
  NodeContext,
  INode,
  IRegisterNode,
} from 'react-flow-builder';
import {
  Drawer,
  Popconfirm,
  Popover,
} from 'antd';
import 'antd/dist/antd.css';
import './index.css'

class App extends Component {
  constructor(props) {
    super(props);
    this.state={
      registerNodes:[],
      nodes:[]
    }
  }

  static contextType = NodeContext;

  componentDidMount() {
    // this.init();
    this.flowInit();
  }

  init=() => {
    const container = document.getElementById('container');
    const graph = new Graph({
      container,
      grid: true,
    })

    const source = graph.addNode({
      x: 180,
      y: 60,
      width: 100,
      height: 40,
      attrs: {
        body: {
          stroke: '#5F95FF',
          fill: '#EFF4FF',
          strokeWidth: 1,
        },
      },
      tools: [
        {
          name: 'node-editor',
          args: {
            attrs: {
              backgroundColor: '#EFF4FF',
            },
          },
        },
      ],
    })

    const target = graph.addNode({
      x: 320,
      y: 250,
      width: 100,
      height: 40,
      attrs: {
        body: {
          stroke: '#5F95FF',
          fill: '#EFF4FF',
          strokeWidth: 1,
        },
      },
      tools: [
        {
          name: 'node-editor',
          args: {
            attrs: {
              backgroundColor: '#EFF4FF',
            },
          },
        },
      ],
    })

    graph.addEdge({
      source,
      target,
      attrs: {
        line: {
          stroke: '#A2B1C3',
          strokeWidth: 2,
        },
      },
      tools: [
        {
          name: 'edge-editor',
          args: {
            attrs: {
              backgroundColor: '#fff',
            },
          },
        },
      ],
    })

    // 2.8.0 版本之前使用方式
  // graph.on('node:dblclick', ({ node, e }) => {
  //   node.addTools({
  //     name: 'node-editor',
  //     args: {
  //       event: e,
  //     },
  //   })
  // });
  }

  // static contextType=NodeContext;
  flowInit=()=>{
        let self = this;
        const StartNodeDisplay= () => {
          
          return <div className="start-node">{'start'}</div>;
        };
        
        const EndNodeDisplay= () => {
          return <div className="end-node">{'end'}</div>;
        };
        
        const OtherNodeDisplay= () => {
          return <NodeContext.Consumer>{(context)=>{
            let s = context;
            console.log("🚀 ~ App.js:159 ~ App ~ OtherNodeDisplay ~ s:", s)
            return <div className="other-node">{'other'}</div>;
          }}</NodeContext.Consumer>;
        };
        
        const ConditionNodeDisplay= () => {
        return <NodeContext.Consumer>{(context)=>{
          let s = context;
          console.log("🚀 ~ App.js:15999 ~ App ~ OtherNodeDisplay ~ s:", s)
          return <div className="condition-node">{'condition'}</div>;
        }}</NodeContext.Consumer>;
      };
        
    
    const registerNodes= [
      {
        type: 'start',
        name: 'start node',
        displayComponent: StartNodeDisplay,
        isStart: true,
      },
      {
        type: 'end',
        name: 'end node',
        displayComponent: EndNodeDisplay,
        isEnd: true,
      },
      {
        type: 'node',
        name: '普通节点',
        displayComponent: OtherNodeDisplay,
      },
      {
        type: 'condition',
        name: '条件节点',
        displayComponent: ConditionNodeDisplay,
      },
      {
        type: 'branch',
        name: '分支节点',
        conditionNodeType: 'condition',
      },
    ];
    this.setState({registerNodes:registerNodes});
  }
  
  handleChange = (nodes) => {
    console.log('****nodes change',this.context,NodeContext);
    this.setState({nodes});

  };
  render() {
    
    console.log('****',this.context,NodeContext);
    const {nodes,registerNodes}=this.state;
    return <div className="wrap">
      <div id="container">
      {registerNodes.length>0 && <FlowBuilder
      nodes={nodes}
      onChange={this.handleChange}
      registerNodes={registerNodes}
      DrawerComponent={Drawer}
      PopoverComponent={Popover}
      PopconfirmComponent={Popconfirm}
      historyTool
        zoomTool
    />}
      </div>
      <div className="x-render"  style={{ height: '50vh' }}>
      <SchemaBuilder importBtn={true} exportBtn={true} pubBtn={false} />
      </div>
    </div>
  }
}

export default App;